<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:51
-->
<template>
  <div>
    <div ref="pieCanvas" class="ring-container"></div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
  data() {
    return {
      title:'设备状态分布',
      empData:[]
    };
  },
  computed: {},
  methods:{
    async loadRing() {
      // 获取原始数据
      const res = await get('/dashboard/queryDeviceOnlineNumber');
      const data = res.data;
      
      // 计算设备总数
      this.total = data.reduce((sum, item) => sum + item.value, 0);

      const ringPlot = new Pie(this.$refs.pieCanvas, {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        // 关键修改1：设置内半径形成环形
        innerRadius: 0.6,  
        radius: 0.8,
        color: ({ type }) => type === '在线' ? '#2f54eb' : '#cf1322', // 根据图片调整颜色
        // 关键修改2：标签样式调整
        label: {
          type: 'outer',
          content: ({ type, value }) => `${type} ${value}台`, // 匹配图片中的格式
          style: {
            fill: '#333',
            fontSize: 12,
          },
          offset: 20
        },
        // 关键修改3：添加中心统计信息
        annotations: [
          {
            type: 'text',
            position: ['50%', '46%'],
            // content: '设备总数\nTotal ${this.total}',
            style: {
              fontSize: 12,
              fill: '#666',
              textAlign: 'center',
              lineHeight:18
            },
            offsetY: -15,
          },
          {
            type: 'text',
            position: ['50%', '56%'],
            // content: `${this.total}`,
            style: {
              fontSize: 12,
              fill: '#000',
              textAlign: 'center',
            },
          }
        ],
        interactions: [{ type: 'element-active' }],
      });
ringPlot.render();
        },
        async getEmpData() {
           let res = await get('/dashboard/queryDeviceOnlineNumber');
           console.log(res,'获取响应');
           this.empData = res.data;
        }
    },
  created() {},
  async mounted() {
    await this.loadRing();
    
  },
};
</script>
<style scoped>
.ring-container {
  width: 100%;
  height: 200px;
  position: relative;
}
.ring-container > div {
  width: 100% !important;
  height: 200px !important;
}


</style>